<template>
  <div class="game-item entry-bottom" @click="showGameDetailDialog">
    <div class="gameBox">
      <div class="gameCard">
        <el-image
          class="img"
          :src="props.gameCard.imgB || props.gameCard.imgS"
          ref="domImg"
        />
        <div class="gameInfo">
          <span style="font-size: 14px; white-space: nowrap">{{
            props.gameCard.nameC
          }}</span>
          <span style="margin-top: 10px; font-size: 14px">点击查看详情</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { myScroll } from "@/utils/scrollReveal";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  gameCard: {
    type: Object,
    required: true,
  },
});
const domImg = ref();
onMounted(() => {
  myScroll(".entry-bottom", "bottom");
});

const showGameDetailDialog = () => {
  const position = {};
  position.width = domImg.value.$el.clientWidth;
  position.height = domImg.value.$el.clientHeight;
  position.top = domImg.value.$el.getBoundingClientRect().top;
  position.left = domImg.value.$el.getBoundingClientRect().left;
  store.commit("setImgInitPos", position); // 存储初始化图片位置信息
  store.commit("setGameDetailContent", props.gameCard); // 传入卡片信息
  store.commit("setGameDetail", true); // 打开dialog框
};
</script>

<style scoped lang="less">
.game-item {
  margin-bottom: 40px;
  .gameBox {
    position: relative;
    width: 200px;
    height: 220px;

    .gameCard {
      box-shadow: 0 3px 6px 6px rgba(0, 0, 0, 0.4);
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transition: all 0.35s ease-in-out;
      cursor: pointer;
      .img {
        width: 100%;
        height: 100%;
        transition: all 0.35s ease-in-out;
      }
      .gameInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 999;
        left: 50%;
        transform: translateX(-50%);
        bottom: -20px;
        color: #fff;
        font-size: 18px;
        font-weight: 300;
        transition: all 0.35s ease-in-out;
      }
      &::after {
        display: block;
        content: "";
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        height: 120%;
        background: linear-gradient(
          226deg,
          rgba(255, 255, 255, 0.4) 0%,
          rgba(255, 255, 255, 0.4) 35%,
          rgba(255, 255, 255, 0.2) 42%,
          rgba(255, 255, 255, 0) 60%
        );
        transform: translateY(-25%);
        transition: all 0.65s cubic-bezier(0.18, 0.9, 0.58, 1);
      }

      &:hover {
        box-shadow: 0 3px 10px 10px rgba(0, 0, 0, 0.4);
        & img {
          transform: scale(1.1);
        }
        & .gameInfo {
          bottom: 10px;
        }
        &::after {
          transform: translateY(0%);
        }
      }
    }
  }
}
</style>
